import { View, Image, Button,Swiper, SwiperItem,Text } from "@tarojs/components"
import Taro from '@tarojs/taro'
import NavBar from "../../pages/shopping/topbar/topbar";
import { getStorageSync } from '@tarojs/taro'
import { AtAvatar,AtTabBar,AtSearchBar,AtButton,AtFloatLayout} from 'taro-ui'
import { useState } from "react"
import './shopping.scss'
import sao from './image/saoSao.png'
import more from './image/more.png'
import shopCar from './image/shopCar.png'
import ding from './image/ding.png'
import lei from './image/class.png'
import keFu from './image/keFu.png'
import card from './image/card.png'
import niaoKu from './image/niaoKu.png'
function shopping(){

    const [current] = useState(5)
    const handleClick1 = (value) => {
        if (value === 0) {
            Taro.navigateTo({
                url: '/pages/firstPage/firstPage'
            })
        }else if(value === 1){
            //营养师页面得跳转

        }else if (value === 2) {
            Taro.navigateTo({
                url: '/pages/postBar/postBar'
            })
        }else if(value===3){
            Taro.navigateTo({
                url: '/pages/calendar/calendar'
            })
        }else if (value === 4) {
            Taro.navigateTo({
                url: '/pages/shopping/shopping'
            })
        }
    }
    const handleClick2 = () => {
        Taro.navigateTo({
            url: '/pages/my/index'
        })
    }
    // 未登录时  可以点击图片进行登录
    const handleLogin = () => {
        Taro.navigateTo({
        url: '/pages/my/register/login'
        })
    }
    // 获取缓存中的用户登录信息
    const user = getStorageSync('userInfo')
    const handleChange = () => {
        let img = user.avatarUrl
        let username = user.nickName
        if (img === undefined && username === undefined) {
            img = ''
            return (
                <>
                    <NavBar title="商城" renderLeft={
                    <View onClick={handleLogin}>
                        <AtAvatar className="user" size="small" circle image={img}/>
                    </View>
                    } />
                </>
                )
            } else {
                return (
                <>
                    <NavBar title="商城" renderLeft={
                    <View onClick={handleClick2}>
                        <AtAvatar className="user" size="small" circle image={img}/>
                    </View>
                    } />
                </>
                )
            }
    }
    const onChange = (value) =>{value: value}
    const onActionClick = () =>{}
    const [isOpen, setOpen] = useState(false)
    const changeOpen = () => {
        setOpen(true)
    }
    const classify = () =>{
        Taro.navigateTo({
            url: '/pages/shopping/classify/classify'
        })
    }

    return(
        <View>
            {handleChange()}
            <View className="nav">
                <View className="search">
                    <View>   {/* 扫一扫 */}
                        <image className="sao" src={sao}/>
                        <View className="saoText">扫一扫</View>
                    </View>
                    <AtSearchBar className="AtSearchBar"
                        inputType='number,text'
                        //value={value}
                        onChange={onChange}
                        onActionClick={onActionClick}
                    />                                {/* 搜索 */}
                    <View>{/* 购物车、订单、更多 */}
                        <image src={shopCar} className="sPic" />
                        <View className="saoText">购物车</View>
                    </View>
                    <View>
                        <image src={ding} className="sPic" />
                        <View className="saoText">订单</View>
                    </View>
                    <View onClick={() => changeOpen()}>
                        <image src={more} className="sPic" />
                        <View className="saoText">更多</View>
                    </View>
                    <AtFloatLayout isOpened={isOpen} title="更多功能">
                            <View className="box">
                                <View>
                                    <image src={keFu} className="keFu" />
                                    <View className="boxText">客服</View>
                                </View>
                                <View>
                                    <image src={card} className="keFu" />
                                    <View className="boxText">卡券</View>
                                </View>
                                <View>
                                    <image src={card} className="keFu" />
                                    <View className="boxText">卡券</View>
                                </View>
                                <View>
                                    <image src={card} className="keFu" />
                                    <View className="boxText">卡券</View>
                                </View>
                                <View>
                                    <image src={card} className="keFu" />
                                    <View className="boxText">卡券</View>
                                </View>
                            </View>
                    </AtFloatLayout>
                </View>
                <View  className="like">{/* 猜你喜欢 */}
                    <Text className="likeText" >猜你喜欢</Text>
                    <AtButton type='secondary' size='small' circle={true} className="lAtButton" >奶粉</AtButton>
                    <AtButton type='secondary' size='small' circle={true} className="lAtButton">尿不湿</AtButton>
                    <AtButton type='secondary' size='small' circle={true} className="lAtButton">饭勺</AtButton>
                    <AtButton type='secondary' size='small' circle={true} className="lAtButton">奶嘴</AtButton>
                </View>
                <Swiper className='recommend' indicatorColor='#999' indicatorActiveColor='#333'
                circular indicatorDots autoplay>{/* 打广告 */}
                    <SwiperItem>
                        <View className='recommend1'>1</View>
                    </SwiperItem>
                    <SwiperItem>
                        <View className='recommend2'>2</View>
                    </SwiperItem>
                    <SwiperItem>
                        <View className='recommend3'>3</View>
                    </SwiperItem>
                </Swiper>
            </View>
            <View className="fenLei" >     {/* 分类 */}
                <View className="leii">
                    <image src={niaoKu} className="leiPic" />
                    <View className="leiText">纸尿裤</View>
                </View>
                <View className="leii">
                    <image src={niaoKu} className="leiPic" />
                    <View className="leiText">孕妇装</View>
                </View>
                <View className="leii">
                    <image src={niaoKu} className="leiPic" />
                    <View className="leiText">奶粉</View>
                </View>
                <View className="leii">
                    <image src={niaoKu} className="leiPic" />
                    <View className="leiText">婴儿服</View>
                </View>
                <View className="leii">
                    <image src={niaoKu} className="leiPic" />
                    <View className="leiText">婴儿床 </View>
                </View>
                <View className="leii" onClick={classify} >
                    <image src={lei} className="leiPic" />
                    <View className="leiText">分类</View>
                </View>
            </View>
            <View className="goods">
                <View className="goodsbox" >
                    <View className="goodsPic" ></View>
                    <Text className="goodsText">超耐用尿不湿超耐用尿不湿</Text>
                    <View>￥150</View>
                </View>
                <View className="goodsbox" >
                    <View className="goodsPic" ></View>
                    <Text className="goodsText">超耐用尿不湿超耐用尿不湿</Text>
                    <View>￥150</View>
                </View>
                <View className="goodsbox" >
                    <View className="goodsPic" ></View>
                    <Text className="goodsText">超耐用尿不湿超耐用尿不湿</Text>
                    <View>￥150</View>
                </View>
            </View>
            <AtTabBar
                //backgroundColor='transparent'
                fixed
                tabList={[
                { title: '首页', image: require('../firstPage/image/TaBar1.png') },
                { title: '探索', image: require('../firstPage/image/TaBar2.2.png') },
                { title: '贴吧', image: require('../firstPage/image/TaBar3.1.png') },
                { title: '孕期记录', image: require('../firstPage/image/TaBar4.png') },
                { title: '商城', image: require('../firstPage/image/TaBar5.png') }
                ]}
                onClick={handleClick1}
                current={current}
            />
        </View>
    )

}
export default shopping
